<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>特别限定版</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="layui/layui.js"></script>
    <style>
        .d-box{
            box-shadow:4px 4px 16px #757575; border-radius:4px;background:#fff;margin-top: 30px;height:160px;width: 90%;
        }
    </style>
</head>

<body style="background-color:rgb(236, 236, 236)">
    <div>
        <form class="layui-form" action="" style="margin: 60px 60px;">
            <div class="layui-row">

                <div class="layui-col-md4">
                    <div class="one">
                        <div class="d-box">
                            <div style="padding-top: 10px;">
                                <h2 style="margin-left: 25px;">
                                    <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                                    第一区域
                                </h2>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="margin-left: 40px;margin-top: 10px;">
                                    <div class="c1"><input class="f1" type="checkbox" name="test1" lay-skin="primary"
                                            title="测试1"></div>
                                    <div class="c1"><input class="f1" type="checkbox" name="test1" lay-skin="primary"
                                            title="测试2"></div>
                                    <div class="c1"><input class="f1" type="checkbox" name="test1" lay-skin="primary"
                                            title="测试3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md4">
                    <div class="two" style="display: none;">
                        <div class="d-box">
                            <div style="padding-top: 10px;">
                                <h2 style="margin-left: 25px;">
                                    <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                                    第二区域
                                </h2>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="margin-left: 40px;margin-top: 10px;">
                                    <div class="c2"><input class="f2" type="checkbox" name="test2" lay-skin="primary"
                                            title="测试2-1"></div>
                                    <div class="c2"><input class="f2" type="checkbox" name="test2" lay-skin="primary"
                                            title="测试2-2"></div>
                                    <div class="c2"><input class="f2" type="checkbox" name="test2" lay-skin="primary"
                                            title="测试2-3"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md4">
                    <div class="three" style="display: none;">
                        <div class="d-box">
                            <div style="padding-top: 10px;">
                                <h2 style="margin-left: 25px;">
                                    <i class="layui-icon layui-icon-tips" style="font-size: 20px; color: #1E9FFF;"></i>
                                    第三区域
                                </h2>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="margin-left: 40px;margin-top: 10px;">
                                    <div><input class="f3" type="checkbox" name="test3" lay-skin="primary"
                                            title="测试3-3">
                                    </div>
                                    <div><input class="f3" type="checkbox" name="test3" lay-skin="primary"
                                            title="测试3-6">
                                    </div>
                                    <div><input class="f3" type="checkbox" name="test3" lay-skin="primary"
                                            title="测试3-9">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div style="width:100%;height: 30px;margin-top: -20px;">
            <button type="button" class="layui-btn layui-btn-lg"
                style="width:130px;margin-right:100px;margin-top:-10px;margin-bottom: 40px;float:right">确 认</button>
        </div>

        <div style="margin: 60px 60px;margin-top: -20px;">
            <div class="layui-form-item layui-form-text">
                <div class="layui-input-block" style="margin-left: 0px; box-shadow:4px 4px 16px #757575;border-radius:4px; width:97%;">
                    <textarea name="" placeholder="结果输出" class="layui-textarea" readonly
                        style="height: 200px;border-radius:4px;"></textarea>
                </div>
            </div>
        </div>

    </div>
    <script>
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });

        $(document).ready(function () {
            $(".c1").click(function () {
                $(".two").show();
            });
            $(".c2").click(function () {
                $(".three").show();
            });
        });
    </script>


</body>

</html>